<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="../static/css/reset.css"/>
    <link rel="stylesheet" href="../static/css/style.css">
    <link rel="stylesheet" href="{{ url_for('static',filename='/libs/layui/css/layui.css') }}">
    <script src="{{ url_for('static',filename='/libs/layui/layui.all.js') }}"></script>
    <script src="{{ url_for('static',filename='/libs/jquery-3.5.1.min.js') }}"></script>
</head>
<body>
<div class="outer-container">
    <div class="right">
        <h2 class="title flex-center">
            <div class="single">注册</div>
        </h2>
        <form>
            <div class="item_box">
                <div class="input_box">
                    <input type="text" id="username" placeholder="请输入用户名" autocomplete="off">
                </div>
            </div>
            <div class="item_box">
                <div class="input_box">
                    <input type="text" id="idcard" placeholder="请输入身份证号" autocomplete="off">
                </div>
            </div>
            <div class="item_box">
                <div class="input_box">
                    <input type="tel" id="phone" placeholder="请输入手机号" autocomplete="off">
                </div>
            </div>
            <div class="item_box">
                <div class="input_box">
                    <input type="password" id="password" placeholder="请输入密码" autocomplete="off">
                </div>
            </div>
            <button class="long" id="register">注册</button>
        </form>
        <div class="bottom_box">
            <div class="bottom_left f_16">
                注册即默认同意&nbsp;
                <a href="#" class="xy">
                    &laquo;服务协议&raquo;
                </a>
            </div>
            <div class="bottom_right">
                已有账号？
                <a href="/tologin">直接登录</a>
            </div>
        </div>
    </div>
</div>

<script>
    $("#register").click(function (e) {
        debugger;
        e.preventDefault();
        var username = $("#username").val();
        var idcard = $("#idcard").val();
        var phone = $("#phone").val();
        var password = $("#password").val();

        if (username == "") {
            layer.msg("用户名不为空！");
            return false;
        }
        if (idcard == "") {
            layer.msg("身份证不为空！");
            return false;
        }
        if (phone == "") {
            layer.msg("电话不为空！");
            return false;
        }
        if (password == "") {
            layer.msg("密码不为空！");
            return false;
        }
        $.ajax({
            url: "/register",
            type: "POST",
            data: {
                "username": username,
                "idcard": idcard,
                "phone": phone,
                "password": password,
            },
            success: function (data) {
                if (data.result == 200) {
                    layer.msg('注册成功,去登陆吧······', {
                        icon: 16
                        , shade: 0.01
                        , time: 1000
                    }, function () {
                        window.location.href = "/tologin";
                    });

                } else if (data.result == 300) {
                     layer.msg("该手机号已注册！！");
                     return false;
                }
            },
            error: function (xhr, type, errorThrown) {
                layer.msg("网络有误！")
            }
        })

    })

</script>
</body>
</html>
